<template>
  <div class="code-order">
    <el-row>
      <el-form :model="searchForm" label-width="80px" size="small" inline>
        <el-form-item label="商户名称">
          <el-input placeholder="请输入商户名称" v-model="searchForm.store"></el-input>
        </el-form-item>
        <el-form-item label="所属代理商">
          <el-input placeholder="请输入代理商名称" v-model="searchForm.agent_name"></el-input>
        </el-form-item>
        <el-form-item label="收款账户">
          <el-input placeholder="请输入收款账户" v-model="searchForm.receive_account"></el-input>
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select clearable filterable placeholder="全部" v-model="searchForm.status">
            <el-option v-for="item in orders" :key="item.code" :label="item.status" :value="item.code">{{ item.status }}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="交易时间">
          <el-date-picker type="date" placeholder="开始时间" v-model="searchForm.start" value-format="yyyy-MM-dd" @change="handleChaneStartTime"></el-date-picker>
          <span>-</span>
          <el-date-picker type="date" placeholder="结束时间" v-model="searchForm.end" value-format="yyyy-MM-dd" @change="handleChangeEndTime"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" size="small" type="success" @click="handleClickSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row>
      <el-table size="small" :data="order_data" v-loading="loading">
        <el-table-column label="商户编号" prop="merchant_num"></el-table-column>
        <el-table-column label="门店名称" prop="store_name"></el-table-column>
        <el-table-column label="所属商户" prop="store"></el-table-column>
        <el-table-column label="所属代理商" prop="agent_name"></el-table-column>
        <el-table-column label="收款账号" prop="receive_account"></el-table-column>
        <el-table-column label="交易金额" prop="deal_mount"></el-table-column>
        <el-table-column label="手续费" prop="commission_charge"></el-table-column>
        <el-table-column label="到账金额" prop="arrive_mount"></el-table-column>
        <el-table-column label="交易时间" prop="pay_at"></el-table-column>
        <el-table-column label="订单状态">
          <template slot-scope="scope">
            <span :class="scope.row.pay_status === 4 ? 'err' : ''">{{ scope.row.pay_status === 0 ? '未支付' : scope.row.pay_status === 1 ? '已支付' : scope.row.pay_status === 2 ? '已撤销' : scope.row.pay_status === 3 ? '已退款' : scope.row.pay_status === 4 ? '支付失败' : scope.row.pay_status === 5 ? '已关闭' : '无'}}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :total="page.total" :current-page.sync="page.current" layout="total, prev, pager, next, jumper"  class="fr mt20" @current-change="handleCurrentChange" :page-size="page.pageSize"></el-pagination>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { receListInit, handleGetOrderInti, handleOrderSearch, handleOrderPage } from '@/api/shop'

export default {
  data() {
    return {
      loading: true,
      order_data: [],
      page: {
        total: 0,
        pageSize: 0,
        current: 1
      },
      searchForm: {
        id: '',
        agent_name: '',
        start: '',
        end: '',
        status: '',
        store: '',
        receive_account: ''
      },
      orders: []
    }
  },
  methods: {
    handleCurrentChange(v) {
      this.loading = true
      handleOrderPage(v, this.searchForm).then(response => {
        this.order_data = response.data.result.data
        this.page.current = response.data.result.current_page
        this.loading = false
      })
    },
    handleClickSearch() {
      this.loading = true
      handleOrderSearch(this.searchForm).then(response => {
        this.order_data = response.data.result.data
        this.page.total = response.data.result.total
        this.page.current = response.data.result.current_page
        this.loading = false
      })
    },
    handleChaneStartTime(v) {
      this.searchForm.start = v
    },
    handleChangeEndTime(v) {
      this.searchForm.end = v
    }
  },
  computed: {
    ...mapGetters([
      'id'
    ])
  },
  created() {
    this.searchForm.id = this.id
    handleGetOrderInti().then(response => {
      this.orders = response.data.result
    })
    receListInit(this.id).then(response => {
      this.order_data = response.data.result.data
      this.page.total = response.data.result.total
      this.page.pageSize = response.data.result.per_page
      this.loading = false
    })
  }
}
</script>